import { MovableArea, MovableView, View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import React, { ReactNode, useEffect, useMemo, useState } from "react";

const sysInfo = Taro.getDeviceInfo()
const platform = sysInfo.platform.toLowerCase();
const compensation = platform === 'android' ? 0 : 12
// 记录滑动开始和结束时的值用来计算滑动了多远
const moveX = {}
const OperateList: React.FC<{
    className?: string,
    noDataTitle?: string,
    noDataDesc?: string,
    listData: any[],
    height?: number,
    num?: number,
    width?: number,
    childNode: (item: any) => ReactNode
}> = ({ listData, childNode, className, height, noDataTitle, noDataDesc, num, width }) => {
    const [location, setLocation] = useState({})

    const initVal = useMemo(() => {
        return {
            height: height || 172,
            width: width || 172,
            num: num || 2
        }
    }, [height, width])

    useEffect(() => {
        setLocation(listData.reduce((sum, cur) => {
            const id = cur.id
            moveX[id] = { start: initVal.width, end: initVal.width }
            return {
                ...sum,
                [id]: initVal.width
            }
        }, {}))
    }, [listData])

    const handleMove = (e, id) => {
        moveX[id].end = e.detail.x
    }
    const doMoveStart = (id) => {
        moveX[id].start = location[id]
    }
    const doMoveEnd = (id) => {
        const { start, end } = moveX[id]
        let val = location[id]
        let change = false
        if (end - start < -40) {
            val = 0
            change = true
        }
        if (end - start > 40) {
            val = initVal.width
            change = true
        }
        listData.forEach(item => {
            if (item.id === id) {
                location[item.id] = val + Math.random() / 2
            } else if (change) {
                // 将其他item收起
                location[item.id] = initVal.width
            }
        });
        setLocation({
            ...location
        })
    }

    return (<View className={`opreate-list-container ${className || ''}`}>
        {listData.length ? listData.map(item => {
            return (
                <MovableArea className="move-action-container" key={item.id} style={
                    {
                        height: `${initVal.height}rpx`,
                        width: `${700 + initVal.width * initVal.num * 2}rpx`,
                        left: `${-1 * initVal.num * initVal.width + compensation}rpx`
                    }
                }>
                    <MovableView
                        x={location[item.id] === undefined ? initVal.width : location[item.id]}
                        inertia={false}
                        animation
                        damping={80}
                        outOfBounds
                        direction='horizontal'
                        onChange={(e) => handleMove(e, item.id)}
                        onTouchStart={() => doMoveStart(item.id)}
                        onTouchEnd={() => doMoveEnd(item.id)}
                        className="move-action-item flex-row flex-item"
                        style={{
                            width: `${700 + initVal.num * initVal.width}rpx`
                        }}>
                        {childNode(item)}
                    </MovableView>
                </MovableArea>
            )
        }) : <View className="no-data font-size28 flex-column flex-center">
            <View className="title">{noDataTitle}</View>
            <View className="tips font-size24">{noDataDesc || '暂无数据'}</View>
            <View className="bg-word text-bg-color">AI-LEDGER</View>
        </View>
        }
    </View>)
}
export default OperateList